<template>
  <div>
    <div class="flex-x flex-space" style="padding: 20px 30px">
      <div>近一月报警分布</div>
      <el-radio-group @input="changeType" :value="manufactureSite" size="small">
        <el-radio-button
          v-for="item of manufactureSiteList"
          :key="item.nam"
          :label="item.name"
          >{{ item.name }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <div v-init-screen-h="0" class="chart" ref="chart"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { generateId } from "@/utils";
export default {
  props: {
    manufactureSite: { type: String, default: "" },
    alarmStatInfoList: {
      type: Array,
      default: []
    }
  },
  watch: {
    alarmStatInfoList: {
      handler: function(newData, oldData) {
        setTimeout(() => {
          this.init();
        }, 400);
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(["manufactureSiteList"]),
    // 统计数组内 同一天内的总和
    optionData() {
      const cloneData = _.cloneDeep(this.alarmStatInfoList);
      var map = {},
        dest = [];
      for (var i = 0; i < cloneData.length; i++) {
        var ai = cloneData[i];
        if (!map[ai.time2]) {
          dest.push({
            ...ai
          });
          map[ai.time2] = ai;
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.time2 == ai.time2) {
              // 同一天的值相加
              dj.alarmCount = (
                parseFloat(dj.alarmCount) + parseFloat(ai.alarmCount)
              ).toString();
              break;
            }
          }
        }
      }
      return dest;
    }
  },
  data() {
    return {
      option: {},
      chartKey: generateId(),
      lineChart: null
    };
  },
  methods: {
    init() {
      this.$nextTick(() => {
        if (!this.lineChart) {
          this.lineChart = this.$echarts.init(this.$refs.chart);
        }
        this.option = {
          color: ["#FCE62F", "#73DEB3", "#FFB761"],
          dataZoom: [
            {
              show: true,
              height: 25,
              xAxisIndex: [0],
              bottom: 30,
              start: 0,
              end: 100,
              handleSize: "110%"
            },
            {
              type: "inside",
              show: true,
              height: 15,
              start: 1,
              end: 35
            }
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#fff"
              },
              lineStyle: {
                type: "dashed"
              }
            }
          },
          grid: {
            left: "25",
            right: "25",
            bottom: "64",
            top: "20",
            containLabel: true
          },

          xAxis: {
            type: "category",
            data: this.optionData.map(item => {
              return item.time2;
            }),
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize: 12
              }
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            // max: max_value>=100? max_value + 100: max_value+10,
            // max: max_value > 100 ? max_value * 2 : max_value + 10,
            // interval: 10,
            // nameLocation: "center",
            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize: 12
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#F3F4F4"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          series: [
            {
              symbolSize: 10,
              name: "报警数",
              type: "line",
              smooth: true,
              data: this.optionData.map(item => {
                return item.alarmCount;
              })
            }
          ]
        };
        this.lineChart.setOption(this.option);
      });
    },
    changeType(val) {
      this.$emit("update:manufactureSite", val);
      this.$emit("changeType", val);
    }
  },
  mounted() {
    // this.init();
  }
};
</script>

<style lang="scss" scoped>
.chart {
  overflow: hidden !important;
}
</style>
